<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <!-- 顶部区域 -->
<!--        <a-col :span="24">-->
<!--          <a-card>-->
<!--            <div class="box-ver-hor-between">-->
<!--              <div class="primary-color">{{ t('message-manage.title.messageManage') }}</div>-->
<!--              <div>-->
<!--                <a-button type="primary" class="mr-20">-->
<!--                  {{ t('button.import') }}-->
<!--                </a-button>-->
<!--                <a-button type="primary"  @click="gotoPage">-->
<!--                  {{ t('button.add') }}-->
<!--                </a-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </a-card>-->
<!--        </a-col>-->

        <a-col :span="24">
          <a-card>
            <div class="mb-20">
              <!-- 查询参数 -->
              <pro-query
                :searchParam="searchParams.params"
                @on-search ="search"
              ></pro-query>
            </div>
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :operate="operate"
              :param="state.param"
              :toolbar="toolbar"
              :pagination="pagination"
              :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
            >
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>

<script setup>
import { btnIsPowerByCode, filterEmptyByObject } from '@/tools/common'
import { page } from "@/api/module/message";
import {onMounted, reactive} from "vue";
import {useRouter} from "vue-router";
import { getDictByCodesReturnObj } from '@/tools/get-dict'
import dictEnum from '@/const/dict'
import { useI18n } from 'vue-i18n'

const pagination = {
  pageNum: 1,
  pageSize: 10,
}
const router = useRouter()
const { t } = useI18n()

let dictLists = reactive({
  data: {}
})

let searchParams = reactive({
  params: []
})

onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.MESSAGE_TYPE,
    dictEnum.MESSAGE_STATE,
  ])

  searchParams.params = [
    {
      key: "coverType",
      type: "select",
      label: t('message-manage.title.messageLabel'),
      placeholder: t('message-manage.placeholder.pleaseEnter'),
      options: dictLists.data[dictEnum.MESSAGE_TYPE]
    },
    {
      key: "title",
      type: "input",
      label: t('message-manage.title.title'),
      placeholder: t('message-manage.placeholder.pleaseEnter')
    },
    {
      key: "createBy",
      type: "input",
      label: t('message-manage.title.createBy'),
      placeholder: t('message-manage.placeholder.pleaseEnter')
    },
    {
      key: "releaseTime",
      type: "rangeTime",
      label: t('message-manage.title.releaseTime'),
    },
    {
      key: "post",
      type: "select",
      label: t('message-manage.title.status'),
      placeholder: t('message-manage.placeholder.pleaseSelect'),
      options: dictLists.data[dictEnum.MESSAGE_STATE]
    },
  ]
})

const fetch = async (param) => {
  let response = await page(param);
  return {
    data: response.data.record,
    total: response.data.total
  };
};

const search = (value) => {
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value)
  }
}

const toolbar = [
  {
    code: '',
    label: '新增项目',
    type: 'primary',
    event: (selectedRowKeys) => {
      gotoPage()
    }
  },
  {
    code: '',
    label: '批量导入',
    type: '',
    event: (selectedRowKeys) => {
      handleExport()
    }
  },
]

const columns = [
  {
    dataIndex: "coverType",
    key: "coverType",
    title: t('message-manage.title.messageLabel'),
    cellRender: (record, data) => {
      if (dictLists.data[dictEnum.MESSAGE_TYPE]) {
        const item = dictLists.data[dictEnum.MESSAGE_TYPE].find(v => v.value == data)
        return item ? item.label : ''
      }
      return ''
    }
  },
  { dataIndex: "title", key: "title", title: t('message-manage.title.title') },
  {
    dataIndex: "address",
    key: "address",
    title: t('message-manage.title.status'),
    cellRender: (record, data) => {
      if (dictLists.data[dictEnum.MESSAGE_STATE]) {
        const item = dictLists.data[dictEnum.MESSAGE_STATE].find(v => v.value == data)
        return item ? item.label : ''
      }
      return ''
    }
  },
  { dataIndex: "createBy", key: "createBy", title: t('message-manage.title.createBy') },
  { dataIndex: "createTime", key: "createTime", title: t('message-manage.title.createTime') },
]

const operate = [
  {
    label: t('button.detail'),
    event: (record) => {
      router.push({
        path: '/university/message-manage/detail',
        query: {
          id: record.id
        }
      })
    }
  },
  { label: t('button.upperShelf') },
  { label: t('button.lowerShelf') },
];

const state = reactive({
  selectedRowKeys: [],
  param: {},
  visibleSave: false,
  visibleEdit: false,
  visibleInfo: false,
  recordEdit: {},
  recordInfo: {},
})

const handleExport = () => {}

const onSelectChange = selectedRowKeys => {
  state.selectedRowKeys = selectedRowKeys;
};

const gotoPage = () => {
  router.push('/university/message-manage/add')
}
</script>

<style scoped>

</style>
